{% extends "base.html" %}

{% block content %}
<div class="text-center mb-12">
    <h2 class="text-4xl font-bold text-gray-800 mb-4">
        <i class="fas fa-envelope-open text-pink-500"></i>
        公开信件
    </h2>
    <p class="text-gray-600 text-lg">这里展示着大家愿意分享的心事</p>
</div>

<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
    {% if letters %}
        {% for letter in letters %}
        <div class="bg-white/90 backdrop-blur-sm rounded-xl p-6 shadow-lg card-hover transition-all duration-300">
            <div class="flex items-center mb-4">
                <div class="w-12 h-12 bg-gradient-to-r from-pink-400 to-green-400 rounded-full flex items-center justify-center">
                    <i class="fas fa-envelope text-white"></i>
                </div>
                <div class="ml-3">
                    <h3 class="font-semibold text-gray-800">{{ letter[1] }}</h3>
                    <p class="text-sm text-gray-500">{{ letter[5] }}</p>
                </div>
            </div>
            
            <p class="text-gray-600 mb-4 line-clamp-3">
                {{ letter[2][:100] }}{% if letter[2]|length > 100 %}...{% endif %}
            </p>
            
            <div class="flex justify-between items-center">
                <span class="text-sm text-gray-500">
                    {{ letter[4][:10] }}
                </span>
                <a href="/letter/{{ letter[0] }}" class="btn-primary text-white px-4 py-2 rounded-lg text-sm">
                    阅读全文
                </a>
            </div>
        </div>
        {% endfor %}
    {% else %}
        <div class="col-span-full text-center py-12">
            <div class="text-6xl mb-4">🦊🐰</div>
            <h3 class="text-2xl font-semibold text-gray-600 mb-2">暂无公开信件</h3>
            <p class="text-gray-500 mb-4">成为第一个分享心事的人吧！</p>
            <a href="/write" class="btn-primary text-white px-6 py-3 rounded-lg inline-block">
                <i class="fas fa-pen mr-2"></i>写第一封信
            </a>
        </div>
    {% endif %}
</div>
{% endblock %}
